Sélecteurs CSS basiques
En CSS, on sélectionne un (ou plusieurs) éléments HTML via un sélecteur puis on y applique des styles pour mettre en forme ce que l'on a sélectionné. Exemple :
/* h1 est un sélecteur qui sélectionnera toutes les balises h1 dans la page web pour y appliquer une couleur rouge */
h1{
color: red;
}
Les 3 sélecteurs les plus simples sont :
-
La sélection par nom de balise :
<h1>Test</h1>/* Touchera toutes les balises h1 de la page web */ h1{ color: red; } -
La sélection par "id" :
<h2 id="intro">Test</h2>/* Touchera la balise ayant l'id "intro" */ #intro{ color: red; } -
La sélection par "class" :
<h3 class="author">Alice</h3> <h3 class="author">Bob</h3>/* Touchera toutes les balises de la page web ayant la classe "author" */ .author{ color: red; }
On peut utiliser les sélecteurs que l'on veut tant que ça marche, mais il faut garder en tête qu'un "id" doit être unique et peut donc poser des restrictions. Il est donc préférable de préférer l'utilisation des classes autant que possible.
Attention à ne pas faire une sélection trop "simple" par balise. Par exemple si on fait ce sélecteur, tous les paragraphes de la page seront impactés :
p{
color: red;
}
Les classes permettent "d'individualiser" les éléments pour n'en toucher que certains !
Sélecteur universel
Il existe un sélecteur universel, le symbole "*", qui permet de sélectionner tous les éléments HTML de la page.
Il faut au maximum NE JAMAIS S'EN SERVIR car il alourdit considérablement le chargement de la page et n'est pas utile la plupart du temps, sauf dans des cas spécifiques.
*{
color: red;
}
Sélectionner des éléments enfants
Le sélecteur "espace" permet de faire une sélection d'un élément HTML enfant d'un autre. Par exemple dans l'exemple suivant, seuls les paragraphes à l'intérieur d'une div seront de couleur rouge, pas les autres en dehors :
/* Ce sélecteur signifie que toutes les balises "p" situées à l'intérieur d'une balise "div" seront touchées */
div p{
color: red;
}
<!-- Sera pas rouge -->
<p>Texte 1</p>
<div>
<!-- Sera rouge ! -->
<p>Texte 2</p>
<main>
<!-- Sera rouge ! -->
<p>Texte 3</p>
</main>
</div>
Ce sélecteur permet de trouver n'importe quel enfant direct ou non (même s'il y a d'autres balises intermédiaires comme celle dans la balise "main" au dessus.)
Le sélecteur ">" permet de faire la même chose mais il ne sélectionnera que les enfants directs :
/* Avec ce sélecteur, seules les balises "p" directement enfants d'une balise "div" seront sélectionnées */
div>p{
color: red;
}
<!-- Sera pas rouge -->
<p>Texte 1</p>
<div>
<!-- Sera rouge ! -->
<p>Texte 2</p>
<main>
<!-- Sera pas rouge (car ce paragraphe n'est pas un enfant direct d'une "div" ) -->
<p>Texte 3</p>
</main>
</div>
Le poids des sélecteurs (ou spécificité des sélecteurs)
Si un élément est ciblé par plusieurs sélecteurs différent, il peut y avoir des conflits. Dans ce cas, il y a un ordre de priorité pour définir quel sélecteur écrasera les autres (surcharge). L'ordre est le suivant (du plus fort au moins fort) :
- Style avec une règle "!important" (voir plus bas)
- Sélection par ID
- Sélection par classe
- Sélection par nom de balise
Dans l'exemple suivant, le titre h1 sera de couleur verte (car l'id a un poids supérieur à la classe et à la balise) :
h1{
color: red;
}
#byid{
color: green;
}
.byclass{
color: blue;
}
<h1 class="byclass" id="byid">Test</h1>
Si jamais on souhaite changer un style d'un élément dont le poids est trop fort, on peut utiliser le joker "!important" qui permet de forcer un style à passer quand même :
#byid{
color: green;
}
h1{
color: purple !important;
}
<!-- Cette fois le titre sera violet -->
<h1 class="byclass" id="byid">Test</h1>
Attention, on évite en général le plus possible d'utiliser ce joker, il est à réserver pour les cas ou rien d'autre n'est faisable.
Utiliser plusieurs sélecteurs
Si vous souhaitez mettre les même styles à plusieurs éléments différents, vous pouvez lister plusieurs sélecteurs avec une virgule :
h1, h2{
color: red;
}
<!-- Les 2 seront rouges -->
<h1>Titre 1</h1>
<h2>Titre 2</h2>